<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字变化动画</title>
    <style>
        .number-container {
            position: relative;
            width: 50px;
            height: 50px;
            overflow: hidden;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 50px;
            font-size: 24px;
        }

        .number {
            position: absolute;
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease-in-out;
        }

        .number.old {
            animation: slide-up 0.3s ease-in-out forwards;
        }

        .number.new {
            transform: translateY(100%);
            animation: slide-up-new 0.3s ease-in-out forwards;
        }

        @keyframes slide-up {
            to {
                transform: translateY(-100%);
                opacity: 0;
            }
        }

        @keyframes slide-up-new {
            to {
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <div class="number-container" id="number-container">
        <span class="number" id="current-number">0</span>
    </div>
    <button onclick="changeNumber()">改变数字</button>
    <script>
        function changeNumber() {
            const container = document.getElementById('number-container');
            const currentNumber = document.getElementById('current-number');
            const oldNumber = parseInt(currentNumber.textContent);
            const newNumber = oldNumber + 1;

            const newNumberElement = document.createElement('span');
            newNumberElement.textContent = newNumber;
            newNumberElement.classList.add('number', 'new');
            container.appendChild(newNumberElement);

            currentNumber.classList.add('old');

            setTimeout(() => {
                container.removeChild(currentNumber);
                newNumberElement.id = 'current-number';
                newNumberElement.classList.remove('new');
            }, 300);
        }
    </script>
</body>

</html>    